<template>
	<view class="index_box">
		<u-navbar :is-back="false" title="高德地图"></u-navbar>
		<map id='map' ref='map' :longitude='longitude' :latitude='latitude' :markers="markers" :polyline="polyline"
			:scale='scale' show-location :enable-3D='enableThreeD' :enable-satellite='enableSatellite'
			:enable-traffic='enableTraffic' :enable-overlooking='true' :enable-rotate='true'>
			<cover-view class="serach_box">
				<cover-view class="serach_item" @click="serachClick">搜索地点</cover-view>
			</cover-view>
		</map>
		<view class="icon_box">
			<view class="layer_box" @click="">
				<i class="iconfont icon-tuceng" @click='changeLayer'></i>
			</view>
			<!-- 2/3d -->
			<view class="d_box" @click="changeThreeD">
				<view v-if="showxD">3D</view>
				<view v-else>2D</view>
			</view>
			<view class="scale_box">
				<i class="iconfont icon-fangda" @click='zoomInMap'></i>
				<i class="iconfont icon-suoxiao" @click='zoomOutMap'></i>
			</view>
			<view class="location_box">
				<i class="iconfont icon-dingwei" @click='locateMap'></i>
			</view>
			<view class="route_box">
				<i class="iconfont icon-xiangshang" @click='goRoutePage'></i>
			</view>
		</view>
		<u-popup v-model="showLayer" mode="bottom" height='500' :closeable='true'>
			<view class="layer_content">
				<view :class="clickItem==1?'click_layer_item':'layer_item'" @click="selectNormal">
					标准地图
				</view>
				<view :class="clickItem==2?'click_layer_item':'layer_item'" @click="selectSatellite">
					卫星地图
				</view>
				<view :class="clickItem==3?'click_layer_item':'layer_item'" @click='selectRoad'>
					路况地图
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import amap from '../../common/amap-wx.js';
	import {
		key
	} from '../../common/map-key.js';
	import '@/static/iconfont/iconfont.css'

	export default {
		data() {
			return {
				longitude: '',
				latitude: '',
				amapPlugin: null,
				desc: '',
				markers: [],
				polyline: [],
				myPosition: {
					position: '',
					addressName: ''
				},
				scale: 16,
				map: null,
				enableSatellite: false, //开启卫星地图
				enableTraffic: false, //开启实时路况
				enableThreeD: false, //开启3d
				showxD: true, //2/3d显示
				showLayer: false, //图层弹出层
				clickItem: 1
			}
		},
		onLoad() {
			this.amapPlugin = new amap.AMapWX({
				key: key
			});
			// this.getMyLocation()
			this.getRegeo()
		},
		onReady() {
			this.map = uni.createMapContext("map", this);
		},
		methods: {
			//初始化地图,获取当前所在位置
			//法1,type: 'gcj02',altitude: true,更准确
			//不返回当前位置名字
			getMyLocation() {
				uni.showLoading({
					title: '获取信息中'
				});
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					success: (res) => {
						console.log(res)
						_this.myPosition.position = [res.longitude, res.latitude].join(',')
						_this.longitude = res.longitude
						_this.latitude = res.latitude
						_this.markers.push({
							id: 1,
							latitude: res.latitude,
							longitude: res.longitude,
							width: 60,
							height: 80,
							label: {
								content: '当前位置',
								color: '#000000'
							}
						})

						_this.$store.commit('setOriginLng', res.longitude);
						_this.$store.commit('setOriginLat', res.latitude);
						uni.hideLoading();
					},
					fail: function(err) {
						console.error('获取位置信息失败：', err);
						// 获取失败时的处理
					}
				})
			},

			//法2
			getRegeo() {
				uni.showLoading({
					title: '获取信息中'
				});
				this.amapPlugin.getRegeo({
					success: (data) => {
						console.log(data)
						this.myPosition.position = [data[0].longitude, data[0].latitude].join(',')
						this.longitude = data[0].longitude;
						this.latitude = data[0].latitude;

						// this.markers.push({
						// 	id: data[0].id,
						// 	latitude: data[0].latitude,
						// 	longitude: data[0].longitude,
						// 	width: 60,
						// 	height: 80,
						// 	label: {
						// 		content: data[0].regeocodeData.formatted_address,
						// 		color: '#000000'
						// 	}
						// })

						this.$store.commit('setOrigin', data[0].name);
						this.$store.commit('setOriginLng', data[0].longitude);
						this.$store.commit('setOriginLat', data[0].latitude);
						//this.$store.commit('setCity', data[0].regeocodeData.addressComponent.city);

						uni.setStorageSync('originInfo', data[0])
						uni.setStorageSync('city', data[0].regeocodeData.addressComponent.city)
						uni.hideLoading();
					},
					fail: function(err) {
						console.log(err.errMsg)
					}
				});
			},

			//搜索点击事件
			serachClick() {
				uni.navigateTo({
					url: '/pages/search_address/search_address'
				})
			},

			//放大事件
			zoomInMap() {
				if (this.scale <= 20) {
					this.scale = this.scale + 1
				}
			},
			//缩小事件
			zoomOutMap() {
				if (this.scale >= 3) {
					this.scale = this.scale - 1
				}
			},
			//定位事件,需要设置show-location
			locateMap() {
				this.scale = 16
				this.map.moveToLocation()
			},
			//去路线规划页面
			goRoutePage() {
				uni.navigateTo({
					url: '/pages/route/route'
				})
				uni.setStorageSync('search_type', 'go_route')
			},

			//切换3d
			changeThreeD() {
				this.showxD = !this.showxD
				this.enableThreeD = !this.enableThreeD
			},

			//更改图层
			changeLayer() {
				this.showLayer = true
			},
			selectNormal() {
				this.clickItem = 1
				this.enableSatellite = false
				this.enableTraffic = false
			},
			selectSatellite() {
				this.clickItem = 2
				this.enableSatellite = true
				this.enableTraffic = false
			},
			selectRoad() {
				this.clickItem = 3
				this.enableTraffic = true
				this.enableSatellite = false
			}
		},
	}
</script>

<style scoped lang="less">
	.index_box {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		position: relative;
	}

	#map {
		width: 100%;
		flex: 1;
	}

	.icon_box {
		position: absolute;
		bottom: 5vh;
		right: 50rpx;
	}

	.icon_box>view {
		margin-bottom: 20rpx;
	}

	.serach_box {
		width: 100vw;
		margin: 40rpx auto;

		.serach_item {
			width: 90vw;
			height: 100rpx;
			line-height: 100rpx;
			border-radius: 20rpx;
			margin: 0 auto;
			color: #85888d;
			background-color: #ffffff;
			padding-left: 20rpx;
		}
	}

	.scale_box {
		padding: 10rpx;
		border-radius: 50rpx;
		box-shadow: 0 8px 19px 0 rgba(21, 24, 56, 0.09);
		background-color: #ffffff;
		display: flex;
		flex-direction: column;

		.icon-fangda,
		.icon-suoxiao {
			font-size: 60rpx;
			cursor: pointer;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		}
	}

	.location_box {
		padding: 10rpx;
		border-radius: 50rpx;
		box-shadow: 0 8px 19px 0 rgba(21, 24, 56, 0.09);
		background-color: #ffffff;

		.icon-dingwei {
			font-size: 60rpx;
		}
	}

	.route_box {
		padding: 10rpx 0;
		border-radius: 10rpx;

		background-color: #ffffff;
		box-shadow: 0 8px 19px 0 rgba(21, 24, 56, 0.09);

		.icon-xiangshang {
			font-size: 80rpx;
			color: #4B77FA;
		}
	}

	.d_box,
	.layer_box {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #ffffff;
		color: #4E79F7;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-weight: bold;
		box-shadow: 0 8px 19px 0 rgba(21, 24, 56, 0.09);
		overflow: hidden;
	}

	.icon-tuceng {
		font-size: 40rpx;
	}

	.layer_content {
		padding-top: 100rpx;
		display: flex;
		justify-content: space-around;

		.layer_item {
			border: solid 2rpx #f2f1ed;
			padding: 20rpx;
			border-radius: 10rpx;
		}

		.click_layer_item {
			border: solid 2rpx #4B77FA;
			padding: 20rpx;
			border-radius: 10rpx;
		}
	}
</style>